<template>
	<div class="index">
    <div style="padding: 0rem 0rem; position: relative; background: #1989fa; height: 0.9rem;" class="flexcc">
    	<div style="position: absolute; left: 0.3rem; top: 0rem; height: 100%;" class="flexc"><van-icon name="arrow-left" size="0.3rem" style="font-weight: bold;" @click="back()" color="#fff" /></div>
    	<div style="color: #fff;  font-weight: bold;">通知消息</div>
    </div>
    <div style="padding: 0.3rem 0;">
      <div style=" padding-right: 0.3rem; justify-content: flex-end; border-bottom: 1px #ddd solid; padding-bottom: 0.2rem;" class="flex">
        <van-button type="info" size="small" style="padding: 0 15px; border-radius: 4px;" @click="yueduall">全部已读</van-button>
        <van-button type="danger" size="small" style="margin-left: 0.3rem; padding: 0 15px;  border-radius: 4px;" @click="shanchuall">全部删除</van-button>
      </div>

      <div class="flex" v-for="(item,index) in list" :key="index" style=" padding: 0.1rem 0.2rem; border-bottom: 1px #ddd solid;" @click="go('/xiaoxi/xiangqing',item.id)" :class="item.ydzt == 0?'weidu':'yidu'">
    		<!-- <div class="flex" style="width: 1rem; margin-right: 0.2rem;">
    			<div><img src="../../../img/1.png" style="width: 1rem; border-radius: 0.5rem; "></div>
    		</div> -->
        <van-swipe-cell :on-close="onClose" :dateIiem="item">
          <van-cell>
            <div style="width: 100vw;">
              <div v-if="item.lx == 1">消息</div>
              <div v-if="item.lx == 2">通知消息</div>
              <div v-if="item.lx == 3">审批消息</div>

              <div style="font-size: 14px; margin-top: 0.1rem;">{{item.nr}}</div>
              <div style="font-size: 12px; color: #999; margin-top: 0.1rem;">{{item.fssj}}</div>
            </div>
          </van-cell>
          <template slot="right">
            <van-button square type="danger" text="删除"/>
          </template>
        </van-swipe-cell>

        <!-- <div>{{item.fssj}}</div> -->
    	</div>
    </div>
	</div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
      document.documentElement.style.fontSize = h;
	export default {
		name: 'kehulist',
		data() {
			return {
        list:[],
        all:{
          fzrid:JSON.parse(localStorage.getItem('person')).userid,
          lx:1
        },

			}
		},
		created() {
      this.getlist()
		},
		mounted() {

		},
		methods: {
      onClose(clickPosition, instance) {

        axios.post('/Message/deleteMessage',{xxid:instance.$attrs.dateIiem.id,fzrid:JSON.parse(localStorage.getItem('person')).userid}).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('删除成功');
            this.getlist()
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },

      yueduall:function(){
        axios.post('/Message/updateAllReadedStatus',{fzrid:JSON.parse(localStorage.getItem('person')).userid,xxzt:1}).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('全部已读');
            this.getlist()
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      shanchuall:function(){
        axios.post('/Message/updateAllReadedStatus',{xxzt:2,fzrid:JSON.parse(localStorage.getItem('person')).userid}).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('删除成功');
            this.getlist()
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },

      getlist:function(){
        axios.get('/Message/queryMessageList',{params:this.all}).then((response)=>{
        	if (response.data.state == 200) {
            this.list = response.data.data
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      }
		}
	}
</script>


<style scoped >
  .weidu{color: #000;}
  .yidu .van-cell__value--alone{color: #999 !important;}

</style>
